<template>
	   <div>
					<ul class="table-main h-lg lh-lg" >
						<li class="w-mint fl h-pct100 pr">
							<span class="table-main-span center">
								<label for="checkName" class="checked-area" @click.stop='checkedAll' :class="{'checked-area-active': checkedFlag}">
										<input type="checkbox" id="checkedAll" class="checked-checkbox">
										全选
								</label>
							</span>
						</li>
          </ul>
					<ul class="table-main h-lg lh-lg" @mouseenter="myMouseenter(index)"  @mouseleave.stop="myMouseleave()"  
					:title="index"
					:class="{'table-main-active':mouseIndex==index?true:false, 'table-main-actived':getGreigeIndexStatus(index)}" 
					v-for="(item,index) in dtansplice" @click="getIndex(index)" :key="index">
						<li class="w-mint fl h-pct100 pr no kmn" >
							<span class="table-main-span center">
								<label for="checkNames" class="checked-area" @click.stop='getIndex(index)' :class="{'checked-area-active': getGreigeIndexStatus(index)}" v-model="selectIdArr" :value="index">
									<input type="checkbox" name="checkboxs" class="checked-checkbox" >
									</label>	{{item.title}}
								</span>
						
						</li>
					</ul>
				<h3>结果</h3>
				<!-- <ul v-if="dtan.length"  >
					<li v-for="(idata,ind) in dtan" :key="ind"  >{{idata.title}}</li>
				</ul> -->
		 </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'
export default {
	name:"danone",
	props: {
		setDatas:{//数据
			type:[Array,Object],
			default:[]
		}
	},
	data(){
		return{
				// dtan:[],
				dtansplice:[],
				mouseIndex: -1,
				selectIdArr: [],
				checkedFlag: false,

				dantitle:[
					{
						isfale:false,
						text:"全选"
					},
				]
		}
	},
	created () {
	},
	mounted() {
		if(this.setDatas.length){
			 this.scllorData=[...this.setDatas]
			 this.scllorData.forEach((data,index) => {
				 data.isfale=false;
			 });
			 this.dtansplice=[...this.scllorData.slice(0,6)]
		}
	},
	methods:{
		/**
		* 点击列表数据得到数据对应下标
		* @param {string} index 序号
		*/
		getIndex(index){
			// this.$store.commit("dyeAllotInDetailsIndex",index);
			var _this = this;
			function checkSelArr(selected){
				var len= _this.selectIdArr.length + 1;
					for (var i = 0; i < len; i++) {
						if (JSON.stringify(_this.selectIdArr[i]) == JSON.stringify(selected)) {
								_this.selectIdArr.splice(i ,1);
								document.getElementById('checkedAll').checked = false;
								return;
						}
					}
				_this.selectIdArr.push(selected);
			}
			checkSelArr(index);
			if (this.selectIdArr.length == this.dtansplice.length) {
					this.checkedFlag = true;
			}else{
					this.checkedFlag = false;
			}
		},
		//全选
		checkedAll(){
			var _this = this;
			var cb = document.getElementsByName('checkboxs');
			// var cb = document.getElementsByClassName("checked-checkbox");

		console.log("sd",cb)
			_this.selectIdArr = [];
			if(this.checkedFlag){
						cb.forEach(function(val,key){
							cb[key].checked = false;
					})
					_this.selectIdArr = [];
					_this.checkedFlag = false;
			}else{
					_this.dtansplice.forEach(function(val,key){
							cb[key].checked = true;
							_this.selectIdArr.push(key);
					})
					_this.checkedFlag = true;
			}
		},
		//表明选中状态
		getGreigeIndexStatus(index){
			var flag = false;
			if(this.selectIdArr.length > 0){
				this.selectIdArr.forEach(function(val,key){
					if(val == index){
							flag = true;
					}
				})
			}
			return flag;
		},
		/*方向键上下*/
		/**
		* 鼠标移入获取对应的数据的序号
		* @param {string} index 序号
		*/
		myMouseenter(index){
			this.mouseIndex = index;
		},
		//鼠标移出
		myMouseleave(){
			this.mouseIndex = -1;
		},
  },
	computed:{
	
	},
	watch:{

	},
	components:{
  }
	
}

</script>

<style scoped >
	  .onetop{
			display: flex;

		}
		.onetop>li{
			width: 120px;
			height: 30px;
			color: #fff;
			line-height: 30px;
			padding: 10px;
			font-size: 20px;
			
			
		}
	  .one{
			display: inline-flex;
			width: 18px;
			height: 18px;
			background: url(./img/no.png) no-repeat center center;
			background-size:cover;
			margin-top:5px;
			vertical-align: top;
			
		}
		.onebootn{
			width: 400px;
			height: 360px;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		.onebootn li{
			height: 24px;
			line-height: 24px;
			border-bottom:1px solid #fff;
			padding: 10px;
			font-size: 18px;
		}
		.oneteo{
			background: url(./img/yes.png) no-repeat center center;
			background-size:cover;
		}


		 .checked-area{
        padding: 0px 16px;
        background:url('../../assets/img/noselect8.png') no-repeat left center;
    }
    .checked-area-active{
        padding: 0px 16px;
        background: url('../../assets/img/selected8.png') no-repeat 0 center;
    }
    .checked-checkbox{
        position: absolute;
        clip: rect(0 0 0 0);
    }

		.w-mint {
			display: flex;
			align-items: center;
			width: 240px;
			
		}
		.w-mint span{padding-right: 20px}
</style>

